<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */
get_header();
?>

<div id="content" class="content full">
    <div class="slider-container">
        <div class="slider" id="revolutionSlider">
            <ul>
                <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
                    <img src="img/slides/slide-bg.jpg" data-fullwidthcentering="on" alt="">

                    <div class="caption sft stb visible-desktop"
                         data-x="42"
                         data-y="180"
                         data-speed="300"
                         data-start="1000"
                         data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>

                    <div class="caption top-label lfl stl"
                         data-x="92"
                         data-y="180"
                         data-speed="300"
                         data-start="500"
                         data-easing="easeOutExpo">DO YOU NEED A NEW</div>

                    <div class="caption sft stb visible-desktop"
                         data-x="342"
                         data-y="180"
                         data-speed="300"
                         data-start="1000"
                         data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>

                    <div class="caption main-label sft stb"
                         data-x="0"
                         data-y="230"
                         data-speed="300"
                         data-start="1500"
                         data-easing="easeOutExpo">WEB DESIGN?</div>

                    <div class="caption bottom-label sft stb"
                         data-x="50"
                         data-y="280"
                         data-speed="500"
                         data-start="2000"
                         data-easing="easeOutExpo">Check out our options and features.</div>

                    <div class="caption fade"
                         data-x="450"
                         data-y="50"
                         data-speed="500"
                         data-start="2500"
                         data-easing="easeOutExpo"><img src="img/slides/slide-concept.png" alt=""></div>

                </li>
                <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
                    <img src="img/slides/slide-bg.jpg" data-fullwidthcentering="on" alt="">

                    <div class="caption fade"
                         data-x="0"
                         data-y="50"
                         data-speed="500"
                         data-start="200"
                         data-easing="easeOutExpo"><img src="img/slides/slide-concept-2.png" alt=""></div>

                    <div class="caption main-label sft stb"
                         data-x="550"
                         data-y="200"
                         data-speed="300"
                         data-start="1500"
                         data-easing="easeOutExpo">CONTACT US</div>

                    <div class="caption bottom-label sft stb"
                         data-x="570"
                         data-y="250"
                         data-speed="500"
                         data-start="2000"
                         data-easing="easeOutExpo">And check out our options and features.</div>

                </li>
            </ul>
        </div>
    </div>

    <div class="home-intro">
        <div class="container">

            <div class="row">
                <div class="span8">
                    <p>
                        The fastest way to grow your business with the leader in <em>Technology.</em>
                        <span>Check out our options and features included.</span>
                    </p>
                </div>
                <div class="span4">
                    <div class="get-started">
                        <a href="#" class="btn btn-large btn-primary">Get Started Now!</a>
                        <div class="learn-more">or <a href="index.html">learn more.</a></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container">

        <div class="row center">
            <div class="span12">
                <h2 class="short">Porto is <strong class="inverted">incredibly</strong> beautiful and fully responsive.</h2>
                <p class="featured lead">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.
                </p>
            </div>
        </div>

    </div>
    <div class="home-concept">
        <div class="container">

            <div class="row center">
                <span class="sun"></span>
                <span style="top: 44.8067px;" class="cloud"></span>
                <div class="span2 offset1">
                    <div class="process-image">
                        <img src="img/home-concept-item-1.png" alt="">
                        <strong>Strategy</strong>
                    </div>
                </div>
                <div class="span2">
                    <div class="process-image">
                        <img src="img/home-concept-item-2.png" alt="">
                        <strong>Planning</strong>
                    </div>
                </div>
                <div class="span2">
                    <div class="process-image">
                        <img src="img/home-concept-item-3.png" alt="">
                        <strong>Build</strong>
                    </div>
                </div>
                <div class="span4 offset1">
                    <div class="project-image">
                        <div id="fcSlideshow" class="fc-slideshow">
                            <ul class="fc-slides">
                                <li style="display: list-item;"><a href="portfolio-single-project.html"><img src="img/projects/project-home-1.jpg"></a></li>
                                <li style="display: none;"><a href="portfolio-single-project.html"><img src="img/projects/project-home-2.jpg"></a></li>
                            </ul>
                            <nav><div class="fc-left"><span></span><span></span><span></span><i class="icon-arrow-left"></i></div><div class="fc-right"><span></span><span></span><span></span><i class="icon-arrow-right"></i></div></nav>
<!--                            <div style="transition: transform 700ms cubic-bezier(0.29, 1.44, 0.86, 1.06) 0s; display: block; transform: rotate3d(1, 1, 0, 180deg);" class="fc-flip"><div class="fc-front"><div><a href="portfolio-single-project.html"><img src="img/projects/project-home-2.jpg"></a></div><div style="transition: opacity 538.462ms ease 0s; opacity: 1;" class="fc-overlay-light"></div></div><div style="transform: rotate3d(1, 1, 0, 180deg);" class="fc-back"><div><a href="portfolio-single-project.html"><img src="img/projects/project-home-1.jpg"></a></div><div style="opacity: 0; transition: opacity 538.462ms ease 0s;" class="fc-overlay-dark"></div></div></div>-->
                            <nav><div class="fc-left"><span></span><span></span><span></span><i class="icon-arrow-left"></i></div><div class="fc-right"><span></span><span></span><span></span><i class="icon-arrow-right"></i></div></nav><div class="fc-flip" style="display: none;"><div class="fc-front"><div></div></div><div class="fc-back"><div></div></div></div></div>
                        <strong class="our-work">Our Work</strong>
                    </div>
                </div>
            </div>

            <hr class="tall">

        </div>
    </div>
    <div class="container">

        <div class="row">
            <div class="span8">
                <h2>Our <strong>Features</strong></h2>
                <div class="row">
                    <div class="span4">
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-group"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Customer Support</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-file"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">HTML5 / CSS3 / JS</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, adip.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-google-plus"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">500+ Google Fonts</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-adjust"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Colors</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-film"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Sliders</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, consectetur.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-ok"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Icons</h4>
                                <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-reorder"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Buttons</h4>
                                <p class="tall">Lorem ipsum dolor sit, consectetur adip.</p>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-box-icon">
                                <i class="icon-desktop"></i>
                            </div>
                            <div class="feature-box-info">
                                <h4 class="shorter">Lightbox</h4>
                                <p class="tall">Lorem sit amet, consectetur adip.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span4">
                <h2>and more...</h2>
                <div id="accordion" class="accordion">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle"><i class="icon-lightbulb"></i> Group Item #1</a>
                        </div>
                        <div class="accordion-body collapse in" id="collapseOne">
                            <div class="accordion-inner">
                                Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor odio vulputate eleifend in in tortorodio vulputate eleifend in in tortor.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a href="#collapseTwo" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle"><i class="icon-bell-alt"></i> Group Item #2</a>
                        </div>
                        <div class="accordion-body collapse" id="collapseTwo">
                            <div class="accordion-inner">
                                Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a href="#collapseThree" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle"><i class="icon-laptop"></i> Group Item #3</a>
                        </div>
                        <div class="accordion-body collapse" id="collapseThree">
                            <div class="accordion-inner">
                                Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="tall">

        <div class="row center">
            <div class="span12">
                <h2 class="short">We're not the only ones <strong>excited</strong> about Porto Template...</h2>
                <h4 class="lead tall">5,500 customers in 100 countries use Porto Template. Meet our customers.</h4>
            </div>
        </div>
        <div class="row center">
            <div data-plugin-options="{&quot;directionNav&quot;:false, &quot;animation&quot;:&quot;slide&quot;, &quot;slideshow&quot;: false, &quot;maxVisibleItems&quot;: 6}" class="flexslider unstyled normal-device flexslider-init flexslider-control-nav">

                <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

                        <li style="width: 1200px; float: left; display: block;" class="flex-active-slide"><div class="span2">
                                <img alt="" src="img/logo-client-1.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-2.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-3.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-4.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-5.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-6.jpg" class="mobile-max-width small">
                            </div></li>

















                        <li style="width: 1200px; float: left; display: block;"><div class="span2">
                                <img alt="" src="img/logo-client-4.jpg" class="mobile-max-width small">
                            </div><div class="span2">
                                <img alt="" src="img/logo-client-2.jpg" class="mobile-max-width small">
                            </div></li>




                    </ul></div><ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a>2</a></li></ol></div>
        </div>

    </div>
    <div class="map-section">
        <section class="featured footer map">
            <div class="container">
                <div class="row">
                    <div class="span6">
                        <div class="recent-posts">
                            <h2>Latest <strong>Blog</strong> Posts</h2>
                            <div class="row">
                                <div data-plugin-options="{&quot;directionNav&quot;:false, &quot;animation&quot;:&quot;slide&quot;}" class="flexslider unstyled flexslider-init flexslider-control-nav">

                                    <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                        <?php dynamic_sidebar('sidebar-6'); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <h2><strong>What</strong> Client’s Say</h2>
                        
                       <div class="row">
                            <div data-plugin-options="{&quot;controlNav&quot;:false, &quot;slideshow&quot;: false, &quot;animationLoop&quot;: true, &quot;animation&quot;:&quot;slide&quot;}" class="flexslider flexslider-top-title unstyled flexslider-init flexslider-direction-nav">

                                <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                    <?php dynamic_sidebar('sidebar-7'); ?>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>


</div>
<?php //get_sidebar();  ?>
<?php get_footer(); ?>